@using EmailContacts.ServiceInterface
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Email Contacts</title>
    <script type="text/javascript" src="Scripts/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="Scripts/bootstrap.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.css" rel="stylesheet" />
    <style type="text/css">
        body {
            margin: 20px;
        }
    </style>
</head>
<body>

<h3>Db.Select</h3>
<ul>
    @foreach (var contact in Db.Select<Contact>())
    {
        <li>@contact.Name @contact.Email (@contact.Age)</li>
    }
</ul>

<h3>ResolveService / Get</h3>
<ul>
    @using (var service = Get<ContactsServices>())
    {
        var contacts = service.Any(new FindContacts());
        foreach (var contact in contacts)
        {
            <li>@contact.Name @contact.Email (@contact.Age)</li>
        }
    }
</ul>
        
<h3>Embedded JSON</h3>
<ul id="embedded-json"></ul>
        
<h3>$.getJSON</h3>
<ul id="ajax"></ul>

<script>
            
    //Embed JSON
    $("#embedded-json").append(
        contactsHtml(@(Db.Select<Contact>().AsRawJson())));

    //Ajax
    $.getJSON("/contacts", addContacts);

    function addContacts(contacts) {
        $("#ajax").append(contactsHtml(contacts));
    }

    function contactsHtml(contacts) {
        return contacts.map(function (c) {
            return "<li>" + c.Name + " " + " (" + c.Age + ")" + "</li>";
        }).join('');
    }
</script>
</body>
</html>